<template>
  <div class="openPlatform">
    <div class="headImg">
      <div class="logo"><img :src="logo" alt=""></div>
      <div class="title">
        <P class="p1">“</P>
        <P class="p2">{{$t('myAdd.openPlatform.title1')}}</P>
        <P class="p3">{{$t('myAdd.openPlatform.title2')}}</P>
      </div>
    </div>
    <div class="cont">
      <div class="project front-color">
        <h1>{{$t('myAdd.openPlatform.project')}}</h1>
        <div class="apply pointer">
          <a href="https://jinshuju.net/f/9ANAVa" target="_black">{{$t('myAdd.openPlatform.applyProject')}}</a>
          <span class="right"></span><span class="right"></span>
        </div>
        <div class="list">
          <ul class="clearfix">
            <li class="pointer" v-for="(item, index) in projectList" :key="index" @click="openPlatformEntrance('income', item.exchangeSymbol)">
              <div class="img">
                <img :src="coinList && coinList[item.exchangeSymbol].icon" alt="">
              </div>
              <p>{{item.exchangeSymbol}}</p>
            </li>
          </ul>
          <p class="tip">{{$t('myAdd.openPlatform.tip')}}</p>
        </div>
      </div>
    </div>
    <!-- 开启生态权益弹窗 -->
    <div class="incomeInfoDialog">
      <elDialog
        title=''
        :flag='openRightsAlert'
        name='openRightsAlert'
        :width='450'
        :isShowCloseBtn = 'true'
        :dialogClose='closeDialog'>
        <div class="openRightsCont" slot="content">
          <div class="description">
            <p class="description1">{{$t('myAdd.openPlatform.openIncome', {exchangeSymbol: exchangeSymbolDialogData.exchangeSymbol})}}</p>
            <p class="description2">{{$t('myAdd.openPlatform.description2')}}</p>
            <p class="description3">{{$t('myAdd.openPlatform.description3')}}</p>
            <div class="logo front-color"><img :src="coinList && exchangeSymbolDialogData.exchangeSymbol && coinList[exchangeSymbolDialogData.exchangeSymbol].icon || coinImg" alt=""></div>
          </div>
          <div class="currencyInfo">
            <p class="index_text fontsize14" v-show="exchangeSymbolDialogData.isSymbolindexOpen">{{$t('myAdd.openPlatform.currentIndexPrice', {exchangeSymbol: exchangeSymbolDialogData.exchangeSymbol})}}</p>
            <p class="index_text lineHeight20 fontsize24" v-show="!exchangeSymbolDialogData.isSymbolindexOpen">{{exchangeSymbolDialogData.exchangeSymbol}}</p>
            <p class="index_val" v-show="exchangeSymbolDialogData.isSymbolindexOpen"><span>{{exchangeSymbolDialogData.symbolIndex}}</span><span class="unit">{{unit}}</span></p>
          </div>
          <div class="inp">
            <input type="text" :placeholder="Internationalization.enterRecommendCode" v-model="recommendCode" name="" id="">
          </div>
        </div>
        <div class="openRightsFooter" slot="options">
          <button @click="bindReferences(exchangeSymbolDialogData.exchangeSymbol)">{{$t('myAdd.openPlatform.confirm')}}</button>
        </div>
      </elDialog>
    </div>
    <span v-if="publicInfo"></span>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import elDialog from '@/components/common/addCommon/dialog'
import coinImg from '@/assets/img/coindef.png'
export default {
  name: 'openPlatform',
  components: { elDialog },
  data () {
    return {
      logo: require('../../../static/static/addImg/openPlatform/logo.png'),
      isLogin: false,
      siteType: [],
      webSiteInfo: null,
      http: location.protocol + '//',
      openRightsAlert: false,
      projectList: [],
      coinList: null,
      exchangeSymbolDialogData: {
        exchangeSymbol: null,
        symbolIndex: null,
        indexType: null,
        isSymbolindexOpen: null
      },
      coinImg: coinImg,
      recommendCode: '',
      secondClick: true,
      pageRoute: null,
      exchangeSymbol: null
    }
  },
  mounted () {
    this.getProjectList()
  },
  computed: {
    ...mapState({
      publicInfo ({baseData}) {
        if (baseData.isReady) {
          this.isLogin = baseData.isLogin
          this.siteType = baseData._siteType
          this.webSiteInfo = baseData._webSiteInfo
          this.coinList = baseData._coinList
          return baseData
        } else {
          return false
        }
      }
    }),
    unit () {
      let unit = null
      this.exchangeSymbolDialogData.indexType === 0 && (unit = 'CNY')
      this.exchangeSymbolDialogData.indexType === 1 && (unit = 'USD')
      return unit
    },
    Internationalization () {
      return {
        enterRecommendCode: this.$t('myAdd.openPlatform.enterRecommendCode') // 请输入推荐码
      }
    }
  },
  methods: {
    closeDialog () {
      this.openRightsAlert = false
      this.exchangeSymbolDialogData.exchangeSymbol = null
      this.exchangeSymbolDialogData.symbolIndex = null
      this.exchangeSymbolDialogData.indexType = null
      this.exchangeSymbolDialogData.isSymbolindexOpen = null
      this.recommendCode = null
    },
    // 去相应的页面
    toTargetPage (pageRoute, name) {
      if (this.siteType.length === 1) { // 线上
        if (name) {
          window.location.href = this.http + this.webSiteInfo.ex_pc_url + '/' + pageRoute + '?name=' + name
        } else {
          window.location.href = this.http + this.webSiteInfo.ex_pc_url + '/' + pageRoute
        }
      } else { // 线下
        if (name) {
          this.$router.push({
            path: '/' + pageRoute,
            query: {
              name: name
            }
          })
        } else {
          this.$router.push({path: '/' + pageRoute})
        }
      }
    },
    // 开创区项目列表
    getProjectList () {
      this.axios({
        url: this.$store.state.url.openPlatform.project_list,
        header: {},
        method: 'POST',
        params: {}
      }).then(res => {
        if (res.code.toString() === '0') {
          this.projectList = []
          this.projectList = res.data
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      })
    },
    // 开创区入口
    openPlatformEntrance (pageRoute, exchangeSymbol) {
      if (!this.secondClick) {
        return false
      }
      this.secondClick = false
      this.pageRoute = pageRoute
      this.exchangeSymbol = exchangeSymbol
      this.axios({
        url: this.$store.state.url.openPlatform.entrance,
        header: {},
        method: 'POST',
        params: { exchangeSymbol: exchangeSymbol }
      }).then(res => {
        this.secondClick = true
        if (res.code.toString() === '0') {
          this.projectList.forEach(item => {
            if (item.exchangeSymbol === exchangeSymbol) {
              this.exchangeSymbolDialogData.exchangeSymbol = item.exchangeSymbol
              this.exchangeSymbolDialogData.symbolIndex = item.symbolIndex
              this.exchangeSymbolDialogData.indexType = item.indexType
              this.exchangeSymbolDialogData.isSymbolindexOpen = Number(item.isSymbolindexOpen)
            }
          })
          if (!res.data) {
            this.openRightsAlert = true
          } else {
            this.toTargetPage(pageRoute, exchangeSymbol)
          }
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      })
    },
    // 绑定推荐人
    bindReferences (exchangeSymbol) {
      if (!this.recommendCode) {
        this.$store.dispatch('setTipState', {text: '请输入推荐码', type: 'error'})
        return false
      }
      if (!this.secondClick) {
        return false
      }
      this.secondClick = false
      this.axios({
        url: this.$store.state.url.openPlatform.bind_references,
        header: {},
        method: 'POST',
        params: {
          referralCode: this.recommendCode,
          exchangeSymbol: exchangeSymbol
        }
      }).then(res => {
        this.secondClick = true
        if (res.code.toString() === '0' && res.data) {
          this.toTargetPage(this.pageRoute, this.exchangeSymbol)
        } else {
          this.$store.dispatch('setTipState', {text: res.msg, type: 'error'})
        }
      })
    }
  }
}
</script>
